<template>
  <div>
    <div v-if="!isAddPage" class="page" style="height: calc(100vh - 125px)">
      <div class="page-brand">视频发布</div>
      <div class="g-card container rel">
        <div class="flex-b align-center">
          <el-button
            type="primary"
            @click="currentId='';isAddPage = true"
          >创建发布任务</el-button>
          <div class="flex-e align-center">
            <el-button type="danger" @click="batchDel">删除任务</el-button>
            <export-btn :list="tableData" name="视频发布列表" />
          </div>
        </div>
        <div class="table-box mt">
          <el-table
            ref="mainTable"
            :data="tableData"
            tooltip-effect="light"
            style="width: 100%"
            size="mini"
            header-row-class-name="mao-table-head"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="Number" width="60" label="序号" />
            <el-table-column prop="taskName" label="任务名" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="reviewStatus" label="审核状态">
              <template slot-scope="scope">
                {{ reviewStatusMap[scope.row.reviewStatus] || "" }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="任务状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  @change="toggleStatus(scope.row)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="platform" label="发布平台">
              <template slot-scope="scope">
                <img :src="getImg(scope.row.platform)" alt="" class="icon">
              </template>
            </el-table-column>
            <el-table-column prop="todo" label="操作" width="180">
              <template slot-scope="scope">
                <a href="javascript:;" class="link" style="margin-right: 15px;" @click.stop="toEdit(scope.row)">编辑</a>
                <a href="javascript:;" class="link" style="margin-right: 15px;" @click.stop="toCopy(scope.row)">复制</a>
                <a href="javascript:;" class="link" style="margin-right: 15px;" @click.stop="toDel(scope.row)">删除</a>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-box">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="pageParam.pageSize"
              :total="pageParam.total"
              hide-on-single-page
              @current-change="getList"
            />
          </div>
        </div>
      </div>
    </div>
    <Add v-else :id="currentId" ref="addPage" task-type="1" @back="getList()" />
  </div>
</template>

<script>
import Add from './components/Add.vue'
import { getList, delTask, toggleStatus, copyTask } from '@/api/publish'
export default {
  name: 'Dashboard',
  components: { Add },
  data() {
    return {
      currentId: '',
      tableData: [],
      reviewStatusMap: {
        0: '未审核',
        1: '审核通过',
        2: '审核失败',
        3: '全部通过'
      },
      platformMap: {
        'douyin': '抖音',
        'xiaohongshu': '小红书',
        'shipinhao': '视频号',
        'bilibili': '哔哩哔哩',
        'kuaishou': '快手'
      },
      pageParam: {
        total: 0,
        pageNo: 1,
        pageSize: 10
      },
      isAddPage: false,
      selectedList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    toExport() {
      console.log(this.tableData)
    },
    async toCopy(row) {
      const res = await copyTask({ id: row.id.toString() })
      if (res.success) {
        this.$message.success('复制成功')
      } else {
        this.$message.error(res.message)
      }
      this.getList()
    },
    async toggleStatus(row) {
      const res = await toggleStatus({
        id: row.id.toString()
      })
      if (res.success) {
        this.$message.success('操作成功')
      } else {
        this.$message.error(res.message)
      }
      this.getList()
    },
    async getList(pageNo = 1) {
      this.pageParam.pageNo = pageNo
      this.isAddPage = false
      const res = await getList({
        taskType: 1, // 1-视频发布 2-图文发布 3-扫码发布
        pageNo: this.pageParam.pageNo,
        pageSize: this.pageParam.pageSize
      })
      if (res.success) {
        this.tableData = res.result.records.map((item, index) => {
          item.Number = (index + 1).toString()
          return item
        })
        this.pageParam.total = res.result.total
      } else {
        this.$message.error(res.message)
      }
    },
    toEdit(row = {}) {
      this.currentId = row.id.toString()
      this.isAddPage = true
    },
    getImg(name) {
      return require('@/assets/images/auth/' + name + '.png')
    },
    toDel(row = {}) {
      this.$confirm('确定要删除该发布任务？', '删除任务')
        .then(async() => {
          const res = await delTask({
            id: row.id.toString()
          })

          if (res.success) {
            this.$message.success('删除成功')
            this.getList()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$message.warning('取消')
        })
    },
    handleSelectionChange(val) {
      this.selectedList = val
    },
    async batchDel() {
      if (!this.selectedList.length) {
        this.$message.warning('请先选择数据')
        return
      }
      const requestList = []
      for (let i = 0; i < this.selectedList.length; i++) {
        const row = this.selectedList[i]
        requestList.push(delTask({
          id: row.id.toString()
        }))
      }
      const resList = await Promise.all(requestList)
      if (resList.every(res => res.success)) {
        this.$message.success('删除成功')
        this.getList()
      } else {
        this.$message.error('删除有误，请重试')
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.mt {
  margin-top: 20px;
}
.icon{
  width: 50px;
  height: 50px;
}
</style>
